<script setup>
// 返回
import { ref } from 'vue';
const time = ref(30 * 60 * 60 * 1000);
    
    const onClickLeft = () => history.back();
  
</script>
<template>
<van-nav-bar :fixed="true" :placeholder="true" title="订单详情" left-arrow @click-left="onClickLeft" />
    <div class="sysj">
        <van-icon name="clock-o" />
        <span style="padding: 0 10px;">等待付款</span>
        <span style="padding: 0 10px;">剩余时间</span>
        <div class="sj">
            <van-count-down :time="time">
        <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
        </template>
        </van-count-down>
        </div>
    </div>
     <div class="xqzhanshi">
      <div class="xqbt">二年级数学志高秋季班(下) <span>￥2340/10课时</span></div>
      <div class="dzrqsk">
        <div>
          <van-icon name="location-o" />
          <span>丰台角门少儿学习中心220教室</span>
        </div>
        <div>
          <van-icon name="calendar-o" /> <span> 2019/9/30 至 2019/12/26</span>
        </div>
        <div>
          <van-icon name="underway-o" /> <span>周一,周四17:00-18:30</span>
        </div>
      </div>
        <h5 class="juan"><span>优惠卷</span><span>-￥15.8</span></h5>
        <h5 class="juan"><span>实付</span><span>￥222</span></h5>
        <h5>订单编号：123456</h5>
        <h5>支付方式：微信</h5>
        <h5>下单时间：2022-9-12 10：53：02</h5>
        <h5>付款时间：2022-9-12 10：53：02</h5>
    </div>
    <div class="anniu">
          <van-button color="#7232dd" plain>取消订单</van-button>
        <van-button color="#7232dd">立即支付</van-button>
    </div>
    
</template>


<style  scoped>
.anniu{
    padding: 0 80px;
     display: flex;
    justify-content: space-between;
}
.juan{
    display: flex;
    justify-content: space-between;
}
.juan span:last-child{
    color: #ee0a24;
}
.xqbt > span {
  font-weight: 700;
  color: #ff0000;
  font-size: 13px;
  margin-left: 50px;
}
.xqzhanshi {
  padding: 50px 20px 20px 20px;
}
.xqbt {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
.dzrqsk {
  font-size: 12px;
  color: rgb(153, 153, 153);
  padding-bottom: 10px;
  border-bottom: 2px solid darkgray;
}

.dzrqsk div {
  margin-top: 10px;
}

.dzrqsk span {
  margin-left: 10px;
}
.sj{
    padding-left: 15px;
    display: inline-block;
    width: 100px;
}
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
.sysj{
    color:wheat;
    margin-top: 5px;
    padding: 20px 10px;
    background-color: aqua;
}
</style>